<template>
  <div class="my_container">
    <van-cell-group>
      <van-field v-model="email" label="注册邮箱" placeholder="请输入邮箱号" required />
      <van-field v-model="uname" required clearable label="用户名" placeholder="请输入用户名" />
      <van-field v-model="pwd" type="password" label="密码" placeholder="请输入密码" required />
      <van-field v-model="vCode" center clearable required label="邮箱验证码" placeholder="请输入邮箱验证码">
        <van-button slot="button" size="small" type="primary" @click="sendVcode" :disabled='isTrue'>{{tip}}</van-button>
      </van-field>
    </van-cell-group>
    <van-button type="primary" size="large" @click="register">立即注册</van-button>
    <div class="sideBar">
      <router-link to="/mine/login">已有账号? 立即登录</router-link>
      <router-link to="/mine/findPassword">修改密码</router-link>
    </div>
  </div>
</template>

<script>
import { setInterval, clearInterval } from 'timers';
export default {
  name: 'userRegister',
  data() {
    return {
      email: '',
      uname: '',
      pwd: '',
      vCode: '',
      tip: '发送验证码',
      isTrue:false,
      n:60
    }
  },
  methods: {

    async sendVcode() {
       this.isTrue = true
      this.timer = setInterval(()=>{
        this.n--
        this.tip = this.n+'s后重新发送'
        if(this.n<=0){
          clearInterval(this.timer)
           this.tip = '发送验证码'
           this.isTrue = false
        }
      },1000)
     
     
      if (this.email.trim() == '') {
        this.$toast('请输入邮箱账号')
        return
      }
      let res = await this.$axios.get('/api2/users/verify', {
        params: {
          email: this.email
        }
      })
      if (res.status === 0) {
        this.$toast('验证码已发送')
      } else {
        this.$toast('验证码发送失败,请稍候再试')
      }
    },
    async register() {
      let res = await this.$axios.post('/api2/users/register', {
        email: this.email,
        uname: this.uname,
        pwd: this.pwd,
        vCode: this.vCode
      })
      if (res.status !== 0) return this.$toast('注册失败,请重新输入')
      this.$toast('注册成功')
      setTimeout(() => {
        this.$router.push('/mine/login')
      }, 1000)
    }
  }
}
</script>

<style scoped>
.my_container {
  padding-top: 51px;
}
.sideBar {
  margin-top: 15px;
  display: flex;
  justify-content: space-between;
  padding: 0 5px;
}
.sideBar a {
  color: #e54847;
  font-size: 14px;
}
.van-button--large {
  width: 80%;
  display: block;
  margin: 15px auto 0;
}
</style>
